<table style="vertical-align: top; width: 100%">
  <tr>
    <td colspan=2 ng-class="getCssClassForRule(rule)">
      <center style="font-weight: bold;">
        <span ng-if="isRuleConfusing(rule)">
          <i class="icon-warning-sign" title="This rule loops back to the same state and has no feedback, so it will probably confuse readers."></i>
        </span>
        <span>
          <span angular-html-bind="rule | parameterizeRuleDescription: choices"></span>
        </span>
      </center>
    </td>
  </tr>
  <tr>
    <td class="oppia-feedback-bubble">
      <span ng-if="rule.feedback.length === 0">
        <em>This rule provides no feedback.</em>
      </span>
      <span ng-repeat="fb in rule.feedback">
        • <span angular-html-bind="fb"></span><br>
      </span>
    </td>
    <td class="oppia-dest-bubble">
      <div class="oppia-align-center">
        <span ng-if="rule.dest == getActiveStateName()">
          ⟳ <[rule.dest]>
        </span>
        <span ng-if="rule.dest == 'END'">
          <[rule.dest]>
        </span>
        <span ng-if="rule.dest != 'END' && rule.dest != getActiveStateName()">
          <a href="/create/<[explorationId]>#/gui/<[rule.dest]>">
            <[rule.dest]>
          </a>
        </span>
      </div>
    </td>
  </tr>
</table>
